<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar
      title="分类"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-row>
      <van-col span="5">
        <van-sidebar v-model="active">
          <van-sidebar-item
            @click="change(item.categoryId)"
            class="fenlei"
            v-for="item in category"
            :key="item.categoryId"
            :title="item.categoryName"
          />
        </van-sidebar>
      </van-col>
      <van-col span="19">
        <ul class="container">
          <li
            v-for="item in brand"
            :key="item.id"
          >
            <van-button
              style="border:0"
              @click="gocategory(item.brand_id)"
            >
              <van-image
                :src="item.brand_img"
                width="1.3rem"
                height="1.0rem"
                fit="contain"
              />
            </van-button>
            <p style="font-size:10px;margin:0;line-height:20px">{{item.brand_name}}</p>
          </li>
        </ul>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "Scategory",
  data() {
    return {
      active: this.$route.query.id - 1,
      category: null,
      id: "",
      categoryid: "",
      brand: [],
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    //   获取分类
    getcategory() {
      this.axios
        .post("apis/kuan_api/category.php")
        .then((res) => {
          this.category = res.data.category;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    change(id) {
      this.categoryid = id;
      this.getbrand();
    },
    // 获取品牌
    getbrand() {
      this.axios
        .post("apis/kuan_api/category.php", {
          brandid: this.categoryid,
          code: 1,
        })
        .then((res) => {
          this.brand = res.data.brand;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    gocategory(id) {
      this.$router.push({
        path: "/category",
        query: {
          brandid: id,
        },
      });
    },
  },
  created() {
    this.getcategory();
    this.categoryid = this.$route.query.categoryid;
    this.getbrand();
  },
};
</script>

<style scoped>
.fenlei {
  text-align: center;
  font-size: 12px;
  display: block;
}
.container {
  writing-mode: vertical-lr;
  /* 内容从上到下垂直排列，下一垂直行位于上一行右侧 */
  height: 140px;
  /* 必须控制容器高度，宽度自适应 */
  font-size: 0;
  /* 子元素为行内块元素，需要设置父元素font-size为0，否则子元素会有间隙 */
  margin: 0;
  padding: 0;
}

.container li {
  display: inline-block;
  /*必须设置为行内块，否则会水平排列*/
  width: 70px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  writing-mode: horizontal-tb;
  /* 这里必须改成水平，否则文字显示方向不对*/
  margin: 0 10px 20px 0;
  color: #000;
  font-size: 40px;
  /* 必须重设字体大小,否则font-size为0 */
}
</style>